<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 500px;
        }

        h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }

        .input-section {
            display: flex;
            gap: 10px;
            margin-bottom: 2rem;
        }

        input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        button {
            padding: 10px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #764ba2;
        }

        .todo-list {
            list-style: none;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background: #f8f9fa;
            margin-bottom: 10px;
            border-radius: 5px;
            gap: 10px;
        }

        .todo-item input[type="checkbox"] {
            margin-right: 10px;
        }

        .todo-item.completed span {
            text-decoration: line-through;
            color: #888;
        }

        .delete-btn {
            margin-left: auto;
            background: #dc3545;
            padding: 5px 10px;
            font-size: 14px;
        }

        .auth-container {
            margin-bottom: 20px;
            text-align: center;
        }

        .auth-form {
            display: none;
            margin-bottom: 15px;
        }

        .auth-form.active {
            display: block;
        }

        .auth-form input {
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .user-info {
            display: none;
            margin-bottom: 15px;
            text-align: center;
        }

        .user-info.active {
            display: block;
        }

        .main-content {
            display: none;
        }

        .main-content.active {
            display: block;
        }

        .error-message {
            color: #dc3545;
            margin: 10px 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.12.0/dist/av-min.js"></script>
</head>
<body>
    <div class="container">
        <h1>备忘录</h1>
        
        <!-- 认证部分 -->
        <div class="auth-container">
            <!-- 登录表单 -->
            <div id="loginForm" class="auth-form active">
                <h3>登录</h3>
                <input type="email" id="loginEmail" placeholder="邮箱" required>
                <input type="password" id="loginPassword" placeholder="密码" required>
                <button onclick="login()">登录</button>
                <p>还没有账号？<a href="#" onclick="toggleForms()">注册</a></p>
                <div id="loginError" class="error-message"></div>
            </div>

            <!-- 注册表单 -->
            <div id="signupForm" class="auth-form">
                <h3>注册</h3>
                <input type="email" id="signupEmail" placeholder="邮箱" required>
                <input type="password" id="signupPassword" placeholder="密码" required>
                <button onclick="signup()">注册</button>
                <p>已有账号？<a href="#" onclick="toggleForms()">登录</a></p>
                <div id="signupError" class="error-message"></div>
            </div>

            <!-- 用户信息 -->
            <div id="userInfo" class="user-info">
                <p>当前用户：<span id="userEmail"></span></p>
                <button onclick="logout()">登出</button>
            </div>
        </div>

        <!-- 主要内容 -->
        <div id="mainContent" class="main-content">
            <div class="input-section">
                <input type="text" id="todoInput" placeholder="添加新的待办事项...">
                <button onclick="addTodo()">添加</button>
            </div>
            <ul id="todoList" class="todo-list">
            </ul>
        </div>
    </div>

    <script>
        // 初始化 LeanCloud
        AV.init({
            appId: "你的国内版AppID",
            appKey: "你的国内版AppKey",
            serverURL: "你的国内版服务器地址"
        });

        let currentUser = null;

        // 切换登录/注册表单
        function toggleForms() {
            document.getElementById('loginForm').classList.toggle('active');
            document.getElementById('signupForm').classList.toggle('active');
        }

        // 注册
        async function signup() {
            const email = document.getElementById('signupEmail').value;
            const password = document.getElementById('signupPassword').value;
            
            try {
                const user = new AV.User();
                user.setUsername(email);
                user.setPassword(password);
                user.setEmail(email);
                await user.signUp();
                document.getElementById('signupError').textContent = '';
            } catch (error) {
                document.getElementById('signupError').textContent = error.message;
            }
        }

        // 登录
        async function login() {
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;
            
            try {
                const user = await AV.User.logIn(email, password);
                document.getElementById('loginError').textContent = '';
                updateUIForLoggedInUser(user);
            } catch (error) {
                document.getElementById('loginError').textContent = error.message;
            }
        }

        // 登出
        async function logout() {
            try {
                await AV.User.logOut();
                updateUIForLoggedOutUser();
            } catch (error) {
                console.error('登出错误:', error);
            }
        }

        // 更新已登录用户的UI
        function updateUIForLoggedInUser(user) {
            currentUser = user;
            document.getElementById('userEmail').textContent = user.getEmail();
            document.getElementById('userInfo').classList.add('active');
            document.getElementById('mainContent').classList.add('active');
            document.getElementById('loginForm').classList.remove('active');
            document.getElementById('signupForm').classList.remove('active');
            loadTodos();
        }

        // 更新未登录用户的UI
        function updateUIForLoggedOutUser() {
            currentUser = null;
            document.getElementById('userInfo').classList.remove('active');
            document.getElementById('mainContent').classList.remove('active');
            document.getElementById('loginForm').classList.add('active');
            document.getElementById('todoList').innerHTML = '';
        }

        // 从 LeanCloud 加载待办事项
        async function loadTodos() {
            if (!currentUser) return;

            const query = new AV.Query('Todo');
            query.equalTo('user', currentUser);
            query.ascending('createdAt');
            
            try {
                const todos = await query.find();
                const todoList = document.getElementById('todoList');
                todoList.innerHTML = '';
                
                todos.forEach(todo => {
                    const li = createTodoElement(todo);
                    todoList.appendChild(li);
                });
            } catch (error) {
                console.error('加载待办事项错误:', error);
            }
        }

        // 创建待办事项元素
        function createTodoElement(todo) {
            const li = document.createElement('li');
            li.className = 'todo-item';
            if (todo.get('completed')) {
                li.classList.add('completed');
            }
            
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.get('completed');
            checkbox.onclick = async function() {
                const isCompleted = li.classList.toggle('completed');
                todo.set('completed', isCompleted);
                try {
                    await todo.save();
                } catch (error) {
                    console.error('更新状态错误:', error);
                }
            };

            const span = document.createElement('span');
            span.textContent = todo.get('text');

            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'delete-btn';
            deleteBtn.textContent = '删除';
            deleteBtn.onclick = async function() {
                try {
                    await todo.destroy();
                    li.remove();
                } catch (error) {
                    console.error('删除错误:', error);
                }
            };

            li.appendChild(checkbox);
            li.appendChild(span);
            li.appendChild(deleteBtn);
            
            return li;
        }

        // 添加待办事项
        async function addTodo() {
            if (!currentUser) return;
            
            const input = document.getElementById('todoInput');
            const text = input.value.trim();
            
            if (text === '') return;

            try {
                const Todo = AV.Object.extend('Todo');
                const todo = new Todo();
                todo.set('text', text);
                todo.set('completed', false);
                todo.set('user', currentUser);
                
                const savedTodo = await todo.save();
                const li = createTodoElement(savedTodo);
                document.getElementById('todoList').appendChild(li);
                
                input.value = '';
            } catch (error) {
                console.error('添加待办事项错误:', error);
            }
        }

        // 添加回车键支持
        document.getElementById('todoInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addTodo();
            }
        });

        // 检查当前用户状态
        const currentAVUser = AV.User.current();
        if (currentAVUser) {
            updateUIForLoggedInUser(currentAVUser);
        }
    </script>
</body>
</html> 